<template>
	<view class="feedPage bg-fff">
		<view class="feedItem top-20">
			<view class="header flex">
				<view class="titles flex">
					<text class="titIcon"></text>
					<text class="title">请提供相关问题图片</text>
					(最多6张)
				</view>
			</view>
			<view class="feedContent flex">
				<block v-for="(item,index) in images" :key="index">
					<view class="imgItem flex">
						<image :src="item.url"></image>
						<view class="removeIcon flex" @click="removeImg(index)">
                            <u-icon name="close" color="#ffffff" size="24"></u-icon>
						</view>
					</view>
				</block>
				
				<button class="imgItem clearBtn flex" @click="uploadImgBtn">
					<u-icon name="plus-circle" color="#999999" size="70"></u-icon>
				</button>

				<!-- <view class="imgItem flex" @click="uploadImgBtn">
                    <u-icon name="plus-circle" color="#999999" size="70"></u-icon>
				</view> -->
			</view>
		</view>

		<view class="feedItem">
			<view class="header flex">
				<view class="titles flex">
					<text class="titIcon"></text>
					<text class="title">问题描述</text>
				</view>
			</view>
			<view class="feedContent flex">
				<textarea class="questionDesc" v-model="desc" @input="descInput" placeholder="请描述你的问题(300字以内)" maxlength="300" />
			</view>
		</view>

		<view class="feedItem">
			<view class="header flex">
				<view class="titles flex">
					<text class="titIcon"></text>
					<text class="title">联系方式</text>
				</view>
			</view>
			<view class="feedContent flex">
				<input class="contactInp" v-model="phone" @input="phoneInput" placeholder="请输入您的联系方式,我们及时反馈您的问题" />
			</view>
		</view>
		<button class="submitBtn" @click="submitBtn">提交</button>

		<up-gap :height="60"></up-gap>

		<up-modal :show="showPrivacy" title="用户隐私保护提示" :showCloseBtn="false" :showConfirmButton="false" :closeOnClickOverlay="true" @close="showPrivacy = false" @confirm="showPrivacy = false">
            <privacy-authorize class="width-100" @close="closePrivacyModal"></privacy-authorize>
		</up-modal>
	</view>
</template>
<script>
    import { mapState, mapActions } from 'pinia';
	import { useIndexStore, useUserInfoStore } from '@/store/index';
    import { checkLogin, checkUserInfo, checkWXPrivacyAuthorize, checkUploadImageParam, uuid, getFileType, upload_image } from '@/common/common';
	import { postFeedBack } from '@/common/api';
    // import { adviserFeedback } from '@/common/api-adviser';
	export default {
		data() {
			return {
				versionValid: false,
				images: [],
				desc: '',
				phone: '',
                adviserId: '',
                showPrivacy: false
			}
		},
        computed: {
			...mapState(useIndexStore, ['uploadParam']),
        	...mapState(useUserInfoStore, ['userInfo']),
        },
		onLoad(options) {
			const that = this;
            let { adviserId } = options;
            if(adviserId) {
                this.adviserId = adviserId
            }

			uni.$check_and_login(function() {
				that.init()
			})
		},
		methods: {
			...mapActions(useIndexStore, ['setTabIndex']),
			...mapActions(useUserInfoStore, ['checkUserInfo']),

			//初始化获取上传图片参数
			async init(){
				try {
					await this.checkUserInfo();
					await checkUploadImageParam('public');
					let privacyRes = await checkWXPrivacyAuthorize();
					if(privacyRes) {
						this.showPrivacy = true;
					}
				} catch (error) {}
			},

			//关闭隐私政策模态框
            closePrivacyModal(type) {
				this.showPrivacy = false;
			},

			//上传图片
			uploadImgBtn(){
				const that = this;
				if(!checkLogin()) {
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return
				}
				if(!checkUserInfo()) {
					uni.navigateTo({
						url: `/pages/login/user-info-form`
					})
					return
				}

				uni.chooseMedia({
					count: 6,
					mediaType: ['image'],
					success: (res) => {
						let setImgsKeyArr = res.tempFiles.map(item => {
							return {
								url: item.tempFilePath,
								key: `feedback/${that.userInfo.id}/${uuid()}${getFileType(item.tempFilePath)}`
							}
						}).slice(0, 6);
						
						//循环异步请求
						setImgsKeyArr.forEach(item => {
							upload_image(that.uploadParam['public'], item.url, item.key, function(){
								that.images.push(item);
							});
						});
					},
					fail: (err) => {
						console.log(err)
					}
				})
			},

			//删除图片
			removeImg(index){
				this.images.splice(index,1)
			},

			descInput(e){
				this.desc = e.target.value
			},

			phoneInput(e){
				this.phone = e.target.value
			},

			//提交
			async submitBtn(){
				const that = this;
				//验证desc是否为空，去除空格
				if(!this.desc.trim()){
                    uni.$u.toast('请完善信息');
					return
				}
                if(this.phone !== '' && !this.$u.test.mobile(this.phone)) {
                    uni.$u.toast('请填写正确的手机号');
                    return
                }
                // if(this.adviserId) {
                    // adviserFeedback({image: this.images,content: this.desc,phone: this.phone}).then(res => {
                    // 	if(res.status == 0){
                    // 		this.$common.msg('提交成功')
                    // 		setTimeout(function(){
                    // 			uni.switchTab({
                    // 				url: `/pages/tabBar/my/my`
                    // 			})
                    // 		},1500)
                    // 	}else{
					// 		uni.$u.toast(res.detail);
                    // 	}
                    // })
                // }else {
                    let res = await postFeedBack({image: this.images,content: this.desc,phone: this.phone});
					if(res.status !== 0){
						uni.$u.toast(res.detail);
						return
					}
					uni.$u.toast('提交成功');
					setTimeout(function(){
						//this指向问题
						that.setTabIndex(4);
						uni.switchTab({
							url: `/pages/tabBar/my/index`
						})
					},1500)
				// }
			}
		}
	}
</script>

<style lang="scss" scoped>
	.width-100{
		width: 100%;
	}
	.feedPage{
		padding: 0 20rpx;
		min-height: 100vh;
		overflow: hidden;
		.submitBtn{
			margin-top: 60rpx;
			background-color: #007235;
			color: #FFFFFF;
			padding: 0;
			&::after{
				border: none;
			}
		}
	}
	.feedItem{
		margin-bottom: 40rpx;
		.feedContent{
			justify-content: flex-start;
			flex-wrap: wrap;
			.imgItem{
				width: 200rpx;
				height: 200rpx;
				border: 1rpx dashed #999999;
				border-radius: 10rpx;
				overflow: hidden;
				margin: 20rpx 20rpx 20rpx 0;
				position: relative;
				&:last-child{
					margin-right: 0;
				}
				text{
					font-size: 70rpx;
				}
				image{
					width: 100%;
					height: 100%;
				}
				.removeIcon{
					position: absolute;
					top: 4rpx;
					right: 4rpx;
					width: 32rpx;
					height: 32rpx;
					border-radius: 50%;
					background-color: #EE0A24;
					z-index: 100;
				}
			}
			.questionDesc,.contactInp{
				padding: 10rpx;
				width: 100%;
				background-color: #EEEEEE;
				border-radius: 10rpx;
				margin-top: 20rpx;
			}
			.contactInp{
				height: 50rpx;
				line-height: 50rpx;
			}
		}
	}
</style>
